<template>
    <el-dialog v-model="showflag" :title="title" width="800" align-center @close="resetdata" :close-on-click-modal="false">
        <div style="padding: 0 40px;">
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
                class="demo-ruleForm" :size="formSize" status-icon>
                <el-form-item label="设备编号" prop="code">
                    <el-input v-model="ruleForm.code" :disabled="!isedit" placeholder="请输入设备编号" />
                </el-form-item>
                <el-form-item label="设备名称" prop="device_name">
                    <el-input v-model="ruleForm.device_name" :disabled="!isedit" placeholder="请输入设备名称" />
                </el-form-item>
                <el-form-item label="设备型号" prop="model">
                    <el-input v-model="ruleForm.model" :disabled="!isedit" placeholder="请输入设备型号" />
                </el-form-item>
                <el-form-item label="简介" prop="intro">
                    <el-input v-model="ruleForm.intro" :disabled="!isedit" placeholder="请输入简介"/>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="showflag = false">取消</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, ref, provide, reactive,toRaw,inject } from "vue";
import { ElMessage } from 'element-plus'
import { post } from "../../../../api/request";
import type { FormInstance, FormRules } from 'element-plus'
let showflag = ref(false);
let title = ref("新增设备");
let isedit = ref(true);
let device_id = ref("");

const getdata = inject<() => void>('getdata')!;;//父组件的方法


//表单相关---------------------------------------

interface RuleForm {
  id:string
  code: string
  device_name: string
  model: string
  intro: string
}

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
let ruleForm = reactive<RuleForm>({
  id:'',
  code: '',
  device_name: '',
  model: '',
  intro: ''
})

const rules = reactive<FormRules<RuleForm>>({
  code: [
    { required: true, message: '请填写设备编号', trigger: 'blur' },
  ],
  device_name: [
  { required: true, message: '请填写设备名称', trigger: 'blur' },
  ],
  model: [
    { required: true, message: '请填写设备型号', trigger: 'blur' },
  ],
  intro: [
    { required: true, message: '请填写简介', trigger: 'blur' },
  ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {      
      post({
        url: ruleForm.id?'/admin/School/updateFacility':"/admin/School/addFacility",
        data: toRaw(ruleForm)
      }).then((res: any) => {
          ElMessage.success("操作成功!");
          getdata()
          showflag.value=false
          resetdata()
      });
    } else {
      console.log('error submit!')
    }
  })
}
//表单END---------------------------------------


const resetdata = () => {
    ruleForm.code = "";
    ruleForm.device_name = "";
    ruleForm.model = "";
    ruleForm.intro = "";
    ruleForm.id = "";
    isedit.value=true
    title.value = "新增设备"
}


// 通过 defineExpose 暴露给父组件
defineExpose({
    showflag, title,isedit,device_id,ruleForm
});
</script>


<style lang="scss" scoped>
:deep(.el-form-item){
    margin-bottom: 30px;
}
</style>